<template>
   <div class="echart-content" >
          <div class="chart-zuan" >
                <h3>{{level.name}}:{{level.count}}</h3>
                <div class="pie-chart" ref="chart">

                </div>
                <div class="footer-head">
                        <h4 class="first">
                            <div><span :style='level.zhitui'></span>直推广告</div> 
                        </h4>
                        <h4 class="second">
                            <div><span :style='level.jiantui'></span>间推广告</div> 
                        </h4>
                </div>    
        </div>
     </div>
 </template>

<script>
import { createEchart } from '@/createEcharts'
import Chartoption from '../../echartsOptions/piceEchart'
export default {
  name: 'App',
  props:['level'],
  data() {
    return {

    }
  },
  mounted(){
      let option =JSON.parse(JSON.stringify(Chartoption))
      option.color = this.level.color
      createEchart(this.$refs.chart,option)
  },
}
</script>

<style scoped>
.echart-content {
   flex: 1;
   /* background: red; */
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
}
.chart {
    height: 100%;
    width:100%;
    display: flex;
    flex-direction: row;
    padding-left: 30px;
    box-sizing: border-box;
}
.chart-zuan {
    padding-top: 30px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* position: relative; */
}
h3{
   color: white;
   text-align: center;
   height: 40px;
   line-height: 40px;
}
h4 {
    text-align: center;
    color: aliceblue;
}

.pie-chart {
    flex: 1;
    height: 75%;
    /* width: 300px; */
    /* background: red; */
    /* position: absolute; */
    /* top: -50%; */
    /* left: 50%; */
    /* transform: translate(-50%,0); */
}
.footer-head {
    height: 50px;
    width: 100%;
    /* background: orange; */
    /* position: absolute;
    bottom: 5px; */
}
h4 span{
   display: inline-block;
   height: 15px;
   width: 15px;
  
   margin-right: 10px;
   color: aliceblue;
}
.first div span {
    background: rgba(0, 160, 255, 1);
}
.second div span {
    background: rgba(63, 196, 255, 1);
}
</style>
